<template>
    <div class="header">
        <!-- 折叠图片 -->
        <div class="collapse-btn">
            <i @click="collapseChange" class="el-icon-menu"></i>            
        </div>
        <h2 class="logo">music后台管理</h2>

        <div class="header-right">
            <div class="btn-fullscreen" @click="handleFullScreen">
                <el-tooltip :content="fullscreen ? '取消全屏' : '全屏'">
                    <i class="el-icon-rank"></i>
                </el-tooltip>
            </div>
            <div class="user-avator">
                <img src="../../static/images/user.jpg"/>
            </div>
            <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    {{username}}
                    <i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>


<script>
export default {
    data () {
        return {
            // 是否为全屏
            fullscreen: false,
        }
    },
    methods: {
        // 侧边栏折叠
        collapseChange () {
            this.$bus.$emit("collapse")
        },
        // 全屏
        handleFullScreen () {
            /*
                document.fullscreen: 判断当前浏览器是否为全屏状态
                document.exitFullscreen(): 退出全屏
            */
            if(document.fullscreen) {
                // 为了保证浏览器的兼容性问题: 判断一下是否有当前函数
                if(document.exitFullscreen) {                       
                    document.exitFullscreen()
                }else if(document.webkitCancelFullScreen) {         // safari chrome
                    document.webkitCancelFullScreen()
                }else if(document.mozCancelFullScreen)  {           // firefox
                    document.mozCancelFullScreen()
                }else if(document.msExitFullScreen) {               // ie
                    document.msExitFullScreen()
                }
            }else {
                let element = document.documentElement
                if(element.requestFullscreen) {
                    element.requestFullscreen()
                }else if(element.webkitRequestFullScreen) {             // safari chrome
                    element.webkitRequestFullScreen()
                }else if(element.mozReuqestFullScreen){                 // firefox
                    element.mozReuqestFullScreen()
                }else if(element.msReuqestFullScreen){                  // ie
                    element.msReuqestFullScreen()
                }
            }

            this.fullscreen = !this.fullscreen
        },

        handleCommand (command) {
            if(command == 'logout') {
                localStorage.removeItem("userName")
                this.$router.push("/")
            }
        } 
    },
    computed: {
        username () {
            return localStorage.getItem("userName")
        },


    }
}
</script>


<style scoped lang="less">
    .header {
        position: relative;
        background-color: #253041;
        box-sizing: border-box;
        width: 100%;
        height: 70px;
        font-size: 22px;
        color: #fff;
        .collapse-btn {
            float: left;
            padding: 0 21px;
            cursor: pointer;
            line-height: 70px;

        }
        .logo {
            float: left;
            line-height: 70px;
            height: 70px;
            letter-spacing: 2px;
        }
        .header-right{
            float: right;
            padding-right: 50px;
            display: flex;
            height: 70px;
            align-items: center;
            .btn-fullscreen{
                margin-right: 5px;
                font-size: 24px;
                transform: rotate(45deg);
            }
            .user-avator{
                margin-left: 20px;
                img{
                    display: block;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
            .user-name{
                margin-left: 10px;
                .el-dropdown-link {
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
    }
</style>